<template>
  <div class="my-swiper">
    <!-- Swiper -->
    <swiper :options='swiperOption'>
      <swiper-slide v-for="(item,index) in swiperImgs"
                    :key="index">
        <img :src="item.icon?item.icon:item"
             :style="{height:height}"
             class="swiper-slide-img">
      </swiper-slide>
      <!-- v-slot只能加在template上面 -->
      <template v-slot:pagination>
        <div class="swiper-pagination"></div>
      </template>
    </swiper>
  </div>
</template>
<script>
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
  props: {
    height: {
      type: String,
      default: 'auto'
    },
    swiperImgs: {
      type: Array,
      required: true,
      default: function () {
        return []
      }
    },
    /**
     * paginationType: 
     * 1: 圆点切换
     * 2: 数字切换
     */
    paginationType: {
      type: String,
      default: '1'
    }
  },
  data () {
    return {
      swiperOption: {
        autoplay: true,
        autoHeight: true,
        pagination: {
          el: '.swiper-pagination',
          type: 'bullets',
          bulletClass: 'custom-bullet-class'
        }
      }
    }
  },
  components: {
    swiper,
    swiperSlide
  },
  created: function () {
    this.initPaginationLayout()
  },
  methods: {
    /**
     * 根据分页器类型配置对于分页器
     */
    initPaginationLayout () {
      switch (this.paginationType) {
        // 圆点分页器
        case '1':
          this.swiperOption.pagination = {
            el: '.swiper-pagination',
            type: 'bullets',
            bulletClass: 'custom-bullet-class'
          }
          break;
        // 数字分页器
        case '2':
          this.swiperOption.pagination = {
            el: '.swiper-pagination',
            // 分页器样式
            type: 'fraction'
          }
          break;
      }
    }
  }
}
</script>
<style  lang = 'scss'>
@import "@css/style.scss";
@import "@css/variable.scss";
.swiper-slide-img {
  width: 100%;
  display: inline-block;
  vertical-align: top;
}
// 圆点分页器
.swiper-pagination {
  bottom: px2rem(12);
  .custom-bullet-class {
    box-sizing: border-box;
    border-radius: 100%;
    height: px2rem(6);
    width: px2rem(6);
    border: px2rem(1) solid #fff;
    margin: 0 px2rem(4);
    display: inline-block;
    opacity: 1;
  }
  .swiper-pagination-bullet-active {
    background: white;
  }
}
// 数字分页器
.swiper-pagination-fraction {
  left: auto;
  right: 0;
  width: auto;
  font-size: px2rem($infoSize);
  padding: px2rem(6) px2rem(18);
  background: rgba(0, 0, 0, 0.3);
  border-top-left-radius: px2rem(16);
  border-bottom-left-radius: px2rem(16);
  bottom: px2rem(32);
  color: white;
  .swiper-pagination-current {
    font-size: px2rem($titleSize);
    font-weight: bold;
  }
}
</style>